<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全选，不选，反选</title>
</head>
<body>
  <form action="">
    <p><input type="checkbox" name="" id="">张三</p>
    <p><input type="checkbox" name="" id="">李四</p>
    <p><input type="checkbox" name="" id="">王五</p>
    <p><input type="checkbox" name="" id="">赵六</p>
  </form>
  <button onclick="getAll(0)">全选</button>
  <button onclick="getAll(1)">不选</button>
  <button onclick="getAll(2)">反选</button>
  <script>
    // 三个事件：
    // 1、用户点击  2、在标签上添加checked属性 3、js中，checked=true
    var btn = document.getElementsByTagName('button');
    var input = document.getElementsByTagName('input');
    // 全选
    // btn[0].onclick=function(){
    //   // input[0].checked=true
    //   for(i=0;i<=btn.length;i++){
    //     input[i].checked=true
    //   }
    // };
    // // 不选
    // btn[1].onclick=function(){
    //   // input[0].checked=true
    //   for(i=0;i<=btn.length;i++){
    //     input[i].checked=false
    //   }
    // };
    // // 反选
    // btn[2].onclick=function(){
      // for(i=0;i<=btn.length;i++){
      //   input[i].checked=!input[i].checked
      // }
    // };
    // 封装为函数，进行优化
    function getAll(num) {
      for(i=0;i<=btn.length;i++){
        if(num === 0){
          input[i].checked=true
        }else if(num===1){
          input[i].checked=false
        }else{
          input[i].checked=!input[i].checked
        }
      }
    }
  </script>
</body>
</html>